<template>
	<view class="slideshow" :class="slideshowStyle == 0 ? 'style-0':'style-1'">
		<swiper class="swiper" :style="{height:swiperHeight+'px'}" @change="changeFollowSwiper" 
		:current="swiperCurrentIndex" 
		:indicator-dots="true" 
		indicator-color="rgba(255,255,255,.5)" 
		indicator-active-color="#ffffff" 
		:autoplay="true" 
		:interval="5000"
		>
			<swiper-item v-for="(item,index) in params" :key="index">
				<view class="swiper-item" @click="util.goToLink(item.link)">
					<image mode="widthFix" :src="item.img_url" @error="imageError" class="image"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'SlideShow',
		props: {
			title: {
				type: String,
				default: '轮播组件'
			},
			type: {
				type: String,
				default: 'SlideShow',
			},
			slideshowStyle: {
				type: Number,
				default: 0,
			},
			params: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				swiperHeight: 166,
				swiperCurrentIndex: 0
			}
		},
		onLoad(option) {
			
		},
		created() {
			//console.log(this.params)
			let _this = this;
			this.$nextTick(() => {
				setTimeout(function(){
					_this.getCurrentSwiperHeight('.swiper-item');
				},50)
			})
		},

		methods: {
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					this.swiperHeight = res[0][this.swiperCurrentIndex].height;
					if(this.swiperHeight == 0) this.swiperHeight = 166
					//console.log(this.swiperHeight)
				})
			},
			// 切换swiper
			changeFollowSwiper(e) {
				this.swiperCurrentIndex = e.detail.current;
				this.$nextTick(() => {
					this.getCurrentSwiperHeight('.swiper-item');
			   });
			},
			
			imageError(e) {
				console.log('Image load Error;' + e.detail.errMsg)
			}
		}
	}
</script>

<style lang="scss">
	.slideshow {
		margin: 10rpx 0;
		.image {
			width: 100%;
			height: auto;
			display: block;
			will-change: transform;
		}
		&:first-child {
			margin: 0;
		}
	}
	.slideshow.style-0 {
		
	}
	.slideshow.style-1 {
		position: relative;
		margin: 10rpx 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		z-index: 2;
		.image {
			height: auto;
		}
	}
	
	.uni-swipe {
		.uni-swiper-dot-active {
			background-color: #fff;
			width: 22rpx;
		}
	}
	
</style>
